import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Tabs, Alert, Form, Button, Input, Tag, Divider }  from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const { TabPane } = Tabs;
const FormItem = Form.Item;
const { TextArea } = Input;
@connect(({ checker, loading }) => ({
  checker,
  loading: loading.models.checker,
}))
@Form.create()
export default class Checker extends PureComponent{

  state = {
    content: '',
    show: 'none',
  };

  componentDidMount(){

  }

  fastCheck = (content) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'checker/fastCheck',
      payload: {
        content,
      },
    });
  };

  fastSubmit = (e) => {
    e.preventDefault();
    const { form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      this.setState({
        content: fieldsValue.content,
        show: 'block',
      });
      this.fastCheck(fieldsValue.content);
    });
  };

  defineClass = (key) => {
    if(key === "原创"){
      return <Tag color="#87d068">原创</Tag>
    }else if(key === "一般原创"){
      return <Tag color="#7AC5CD">一般原创</Tag>
    }else if(key === "勉强原创"){
      return <Tag color="#2db7f5">勉强原创</Tag>
    }else if(key === "非原创"){
      return <Tag color="#f50">非原创</Tag>
    }else{
      return <Tag>{key}</Tag>
    }
  };


  render(){
    const { form, checker: { fastResult }, loading} = this.props;
    const { getFieldDecorator } = form;
    const { content, show } = this.state;
    const description = (
      <div>
        <p>1. 违规词汇：根据最新广告法规定不允许出现的违规关键词，未避免被罚，请尽快剔除</p>
        <p>2. 最终结果一般等级分为：原创，一般原创，勉强原创, 非原创</p>
        <p>3. 判定结果仅供参考</p>
      </div>
    );

    return (
      <PageHeaderLayout
        title="原创检测"
        content={
          <div>
            <p>及时避规，自动检测违规词汇，不浪费每一次发文机会。</p>
          </div>
        }
      >
        <Card bordered={false}>
          <Tabs defaultActiveKey="1" onChange={this.tabChange}>
            <TabPane tab="快速检测" key="1">
              <Form onSubmit={this.fastSubmit} style={{ marginTop: 20}}>
                <FormItem>
                  {getFieldDecorator('content', {
                    rules: [{ required: true, message: '必填内容' }, { min: 100, message: '最少100个字符'}],
                  })(
                    <TextArea placeholder="将文本黏贴在这儿" rows={10}> { content }</TextArea>
                  )}
                </FormItem>
                <FormItem>
                  <Button type="primary" htmlType="submit" icon="check">开始检测</Button>
                </FormItem>
              </Form>
              <Card bordered={false} loading={loading} style={{ display: show}}>
                <Alert description={description} type="info" message="" closable />
                <Divider>检测结果</Divider>
                <div>
                  <p>
                  违规词<span style={{ fontSize: 18, color: 'red'}}>({fastResult.outWordCount})</span>：
                    {(fastResult.outWords ? fastResult.outWords : '') .split(' ') .map(item =>  <Tag color="magenta" key={item}> {item} </Tag> )}
                  </p>
                  <p> 最终结果: {this.defineClass(fastResult.finalResult)}</p>
                  <p> 重复度： <span style={{ fontSize: 18 }}>{fastResult.repeatScore}</span>
                    <span style={{ fontSize:12, color:'#D3D3D3' }}> 重复度越大为抄袭文章的概率越大，被搜索引擎搜索到的概率就越小.[ 0~3为原创范围 ＞3为非原创范围 ] </span>
                  </p>
                </div>
              </Card>
            </TabPane>
            <TabPane tab="深度检测" key="2">
              <p>暂未开通</p>
            </TabPane>
          </Tabs>
        </Card>
      </PageHeaderLayout>
    );
  }
}
